import defaultRoutes from "@/routes/index";
import permissionRoutes from "@/routes/permission";
import { ConfigProvider } from "antd";
import "antd/dist/reset.css";
import zhCN from "antd/locale/zh_CN";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import React, { Suspense } from "react";
import { RouterProvider, createBrowserRouter } from "react-router-dom";
import theme from "./constants/theme";
import { useMainStore } from "./stores";
import "./styles/common.css";
import { filterRoutesByMenuList } from "./utils";

dayjs.locale("zh-cn");
export let isAppWorked = false;

const App: React.FC = () => {
  const menuList = useMainStore((state) => state.menuList);
  // 只能执行一次
  if (menuList.length > 0 && !isAppWorked) {
    // 获取到/根路由，将过滤后权限路由加到子集中
    const root = defaultRoutes.filter((item) => item.path === "/")[0];
    const items = filterRoutesByMenuList(permissionRoutes, menuList);
    root.children!.push(...items);
    isAppWorked = true;
  }
  const router = createBrowserRouter(defaultRoutes);
  return (
    <ConfigProvider theme={theme} locale={zhCN} componentSize="middle">
      <Suspense>
        <RouterProvider router={router} />
      </Suspense>
    </ConfigProvider>
  );
};
export default App;
